<template>
  <span class="tree-table-children">
    <label v-show="label.length > 0">
      {{ label }}
    </label>
    <el-checkbox
      :value="value"
      :disabled="disabled"
      :indeterminate="indeterminate"
      @change="changeValue"
    />
  </span>
</template>

<script>
export default {
  name: "TreeTableItem",
  props: {
    label: {
      type: String,
      default: "",
    },
    prop: {
      type: String,
      required: true,
    },
    value: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    indeterminate: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      currentValue: false,
    };
  },
  mounted() {
    this.currentValue = this.value;
  },
  methods: {
    changeValue(value) {
      this.$emit("on-change", {
        prop: this.prop,
        value,
      });
    },
  },
};
</script>

<style scoped lang="scss"></style>
